<template>
<div id="building">
    <div class="main">
        <el-card style="width: 450px;">

            <el-text style="font-size: 1.3em">登录</el-text><br>
            <el-text style="font-size: 0.5em">还没有账号？</el-text>
            <router-link to="enroll" style="font-size: 0.5em" >注册</router-link>

            <el-form ref="form" :model="form" style="margin-top: 10px" label-position="top">
                <el-form-item label="账号">
                    <el-input v-model="form.username" placeholder="邮箱/手机号/用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="form.password" placeholder="请输入密码" show-password></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-checkbox v-model="form.remember">记住密码</el-checkbox>
                    <router-link to="forget" style="font-size: 0.5em;margin-left: 250px" >忘记密码</router-link>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit" style=" width: 800px">登录</el-button><br>
                    <el-divider></el-divider>
                    <el-button plain type="warning" style=" width: 800px">使用微博账号登录</el-button>
                </el-form-item>
                <el-button plain type="success" style=" width: 410px;">使用微信账号登录</el-button>
            </el-form>
        </el-card>
    </div>

</div>

</template>

<script>
import axios from 'axios';

export default {
    name: "myLogin",
    data() {
        return {
            form: {
                username: '',
                password:'',
                remember:'',


            }
        }
    },
    methods: {
        onSubmit() {
            axios.get('http://localhost:8080/login?username='+this.form.username+'&password='+this.form.password).then(res=>{
                    if (res.data===1){
                        this.$router.push('/home')
                    }else{
                        this.$message.error('密码错误')
                    }
            }).catch(error=>{
                console.log(error)
            })





        }
    }
}
</script>

<style scoped>
.main{
    text-align: center; /*让div内部文字居中*/
    background-color: #fff;
    border-radius: 20px;
    width: 300px;
    height: 350px;
    margin: auto;
    position: absolute;
    top: -200px;
    left: -25px;
    right: 0;
    bottom: 0;
}
#building{
    background:url("../img/login.jpg");
    width:100%;
    height:100%;
    position:fixed;
    background-size:100% 100%;
}
</style>
